<template>
    <div class="container">
        <div class="menuHeader">
            <p>快捷菜单</p>
            <div class="set">
                添加/设置
            </div>
        </div>
        <ul>
            <li>商品档案
            </li>
            <li>商品库存</li>
            <li>商品库存明细</li>
            <li>终端销售交易明细
            </li>
            <li>终端财务收银明细
            </li>
            <li>终端销售交易汇总</li>
            <li>终端财务收银汇总</li>
            <li>—— ——</li>
            <li>—— ——</li>
        </ul>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>
.container{
    width: 510px;
    margin: 0 auto;
    .menuHeader{
        display: flex;
        justify-content: space-between;
        line-height: 45px;
        font-weight:bolder;
        p{
            padding-left: 10px;
            box-sizing: border-box;
            font-size: 13px;
            color: #333;
            margin: 0;
            font-style: '微软雅黑';
        }
        .set{
            font-size: 12px;
            cursor: pointer;
            color: #0066FF;
        }
    }
    ul{
        display: flex;
        flex-flow: wrap;
        padding: 0;
        li{
            width: 33.3%;
            height: 40px;
            box-sizing: border-box;
            padding-left: 20px;
            font-size: 12px;
            color: #333;
            list-style: none;
            span{
                display: inline-block;
                width: 20px;
                line-height: 20px;
                background: inherit;
                background-color: rgba(255, 0, 0, 1);
                border: none;
                border-radius: 50%;
                box-shadow: none;
                font-family: '微软雅黑';
                font-style: normal;
                font-size: 10px;
                color: #FFFFFF;
                text-align: center;
            }
        }
    }
}
</style>